<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="layui/css/layui.css" media="all">
</head>

<body>
    <div class="layui-carousel" id="test1">
        <div carousel-item>

        </div>
    </div>

    <script src="layui/layui.js" charset="utf-8"></script>
    <script>
        layui.use('carousel', function () {
            var carousel = layui.carousel;
            //建造实例
            var option = {
                elem: '#test1'
                , width: '100%' //设置容器宽度
                , arrow: 'always' //始终显示箭头
                //,anim: 'updown' //切换动画方式
            };
            console.dir(carousel)
            
            var ins = carousel.render(option);
            ins._reload = ins.reload;
            ins.reload = function (option) {
                if (ins.elemItem.length == 2) {
                    clearInterval(ins.timer);
                    option.autoplay = false;
                    option.arrow = 'none';
                    document.querySelectorAll(".layui-carousel-arrow").forEach(e => e.style.display = 'none');
                    document.querySelector(".layui-carousel-ind").style.display = 'none';
                }
                ins._reload(option);
            }
            var content = document.querySelector("div[carousel-item]");
            var flagment = document.createDocumentFragment();
            for (let i = 0; i < 10; i++) {
                let div = document.createElement("div");
                div.innerText = "项目" + i;
                flagment.appendChild(div);
                div.onclick = function () {
                    content.removeChild(this);
                    ins.reload(option)
                    console.log(ins);
                }
            }
            content.appendChild(flagment);
            ins.reload(option);
        });
    </script>
</body>

</html>